import React, { PureComponent } from 'react';
import { Modal, Form, Select, Input, DatePicker, Button } from 'antd';
import TableForm from './TableForm';
import moment from 'moment';

const FormItem = Form.Item;
const { Option } = Select;
const { TextArea } = Input;

@Form.create()
class SendImgUrlMsgModal extends PureComponent {
  state = {
    sendMsgType: 'send_test',
  };

  handleOk = e => {
    e.preventDefault();
    const { form, onOk } = this.props;
    form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        onOk(values);
        this.setState({
          sendMsgType: 'send_test',
        });
        form.resetFields();
      }
    });
  };

  handleCancel = () => {
    this.props.form.resetFields();
    this.props.onCancel();
    this.setState({
      sendMsgType: 'send_test',
    });
  };

  // 处理发送模式选择变化
  handleSendTypeChange = v => {
    this.setState({
      sendMsgType: v,
    });
  };

  disabledDate = current => {
    return current && current <= moment().endOf(moment);
  };

  render() {
    const { visible, appid, form } = this.props;
    const { sendMsgType } = this.state;
    const { getFieldDecorator } = form;

    return (
      <Modal
        title="发送图文链接消息"
        visible={visible}
        style={{ top: 200 }}
        closable={false}
        cancelText="取消"
        okText="确定"
        width={1200}
        onOk={this.handleOk}
        onCancel={this.handleCancel}
      >
        <Form layout="inline">
          <FormItem label="所属Appid">
            {getFieldDecorator('appid', { initialValue: appid })(<Input disabled={true} />)}
          </FormItem>
          <br />
          <div>
            <FormItem label="图文">
              {getFieldDecorator('items', { rules:[{ required: true, message: '请添加图文信息'}]})(<TableForm />)}
            </FormItem>
          </div>
          <br />
          <FormItem label="发送模式" style={{ marginBottom: 10 }}>
            {getFieldDecorator('send_type', { initialValue: 'send_test' })(
              <Select onChange={this.handleSendTypeChange}>
                <Option value="send_test">测试发送</Option>
                <Option value="send_now">立即发送</Option>
                <Option value="send_delay">定时发送</Option>
              </Select>
            )}
          </FormItem>
          <div>
            {sendMsgType === 'send_test' && (
              <FormItem label="测试openId">
                {getFieldDecorator('test_openid', {
                  rules: [{ required: true, message: '请填写测试用户Id' }],
                })(<Input />)}
              </FormItem>
            )}
            {sendMsgType === 'send_delay' && (
              <FormItem label="定时发送">
                {getFieldDecorator('send_date', {
                  rules: [{ required: true, message: '请选择发送时间' }],
                })(
                  <DatePicker
                    style={{ width: 180 }}
                    disabledDate={this.disabledDate}
                    showTime={{ format: 'HH:mm' }}
                    format="YYYY-MM-DD HH:mm:ss"
                    placeholder="选择时间"
                  />
                )}
              </FormItem>
            )}
          </div>
        </Form>
      </Modal>
    );
  }
}

export default SendImgUrlMsgModal;
